import React, { useEffect, useState } from 'react';
import {getPosters,serchPosters} from '@/services/index';
import { Form, Input, Button, Select, Table, Popconfirm, message, Modal } from 'antd';
import {RootObject1} from '@/utils/comments';

import { Drawer, Col, Row, DatePicker } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
const { Option } = Select;

import Mask from '@/components/mask';

import './Posters.less';

// 表格布局
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};

interface Objs{
    createAt: string,
    id: string,
    imgUrl: string,
    name: string,
    pageUrl: string,
    size: number,
}

const Posters:React.FC=()=>{
    const [form] = Form.useForm();
    let [list,setList] = useState<RootObject1[]>([]);   // 列表数据
    let [visible,setvisible] = useState(false);
    let [objs,setObjs] = useState({} as Objs);

    // 搜索
    const onFinish = (values: any) => {
        console.log(values);
        serchPosters({page: 1,pageSize: 12,...values}).then(res=>{
            console.log('搜索......',res.data[0])
            setList(res.data[0]);
        })
    };
    // 重置
    const onReset = () => {
        form.resetFields();
    };

    // 遮罩层
    // 打开弹框
    const openMask = (index:number)=>{
        setvisible(true);
        setObjs(list[index])
    }


    useEffect(()=>{
        getPosters().then(res=>{
            console.log('aaaaaa',res.data[0])
            setList(res.data[0])
            setObjs(res.data[0][0])
        })
    },[])

    const changeFlag=(flag:boolean)=>{
        setvisible(flag)
    }
    return <div className='posters'>
        <div className="posters_head">
            <div className="mes">
                系统检测到<span>阿里云OSS配置</span>未完善，点我立即完善
            </div>
            <div className="cont">
                <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
                    <Form.Item name="name" label="文件名称" style={{ width: '300px' }}>
                        <Input placeholder="请输入称呼" />
                    </Form.Item>
                    <Form.Item {...tailLayout} className='searchs'>
                        <Button type="primary" htmlType="submit">
                            搜索
                        </Button>
                        <Button htmlType="button" onClick={onReset}>
                            重置
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
        

        {/* <Mask createAt={list[0].createAt} id={list[0].id} imgUrl={list[0].imgUrl} name={list[0].name} pageUrl={list[0].pageUrl} size={list[0].size} visible={visible}  /> */}
        <Mask visible={visible} changeFlag={changeFlag} createAt={objs.createAt} id={objs.id} imgUrl={objs.imgUrl} name={objs.name} pageUrl={objs.pageUrl} size={objs.size} />
        <div className="posters_main">
            {
                list.map((item,index)=>{
                    return <div key={item.id} onClick={()=>{openMask(index)}}>
                        <div>
                            <img src={item.imgUrl} alt="" />
                        </div>
                        <ul>
                            <li>{item.name}</li>
                            <li>上传于{item.createAt}</li>
                        </ul>
                    </div>
                })
            }
        </div>
    </div>
}

export default Posters;